<template>
  <div class="open-message-content">
    <div class="top-btn-content">
      <el-button type="primary" :icon="Promotion" plain @click="handleMenu(0)">公开招募</el-button>
      <el-button type="success" :icon="EditPen" plain @click="handleMenu(1)">编 辑</el-button>
      <el-button type="warning" :icon="Avatar" plain @click="handleMenu(2)">快捷登录</el-button>
    </div>
    <div class="open-message-form">
      <el-row :gutter="20">
        <el-col :span="24" style="display: flex">
          <el-col :span="3">
            <span>纳入标准：</span>
          </el-col>
          <el-col :span="18">
            <span>---</span>
          </el-col>
        </el-col>

        <el-col :span="24" style="display: flex">
          <el-col :span="3">
            <span>排除标准：</span>
          </el-col>
          <el-col :span="18">
            <span>---</span>
          </el-col>
        </el-col>

        <div style="width: 100%; padding: 5px 0; margin-bottom: 5px; border: 1px solid black">
          <el-col :span="24" style="display: flex">
            <el-col :span="3">
              <span>采集人体标本：</span>
            </el-col>
            <el-col :span="3">
              <span>标本中文名：</span>
            </el-col>
            <el-col :span="8">
              <span>---</span>
            </el-col>
            <el-col :span="3">
              <span>组织：</span>
            </el-col>
            <el-col :span="7">
              <span>---</span>
            </el-col>
          </el-col>
          <el-col :span="24" style="display: flex">
            <el-col :span="3"></el-col>
            <el-col :span="3">
              <span>人体标本去向：</span>
            </el-col>
            <el-col :span="8">
              <span>---</span>
            </el-col>
            <el-col :span="3">
              <span>说明：</span>
            </el-col>
            <el-col :span="7">
              <span>---</span>
            </el-col>
          </el-col>
        </div>

        <el-col :span="24" style="display: flex">
          <el-col :span="4">
            <span>征募研究对象情况：</span>
          </el-col>
          <el-col :span="10">
            <span>---</span>
          </el-col>
          <el-col :span="3">
            <span>年龄范围：</span>
          </el-col>
          <el-col :span="7">
            <span>---</span>
          </el-col>
        </el-col>

        <el-col :span="24" style="display: flex">
          <el-col :span="3">
            <span>征募性别要求：</span>
          </el-col>
          <el-col :span="18">
            <span>---</span>
          </el-col>
        </el-col>
      </el-row>
    </div>

    <div class="footer-content">
      <span style="color: black; font-weight: 550; flex: 1"
        >干细胞输注时间影响单纯异基因外周血造血干细胞移植术后恶性血液病患者急性移植物抗宿主病发生的多中心前瞻性随机对照
        III 期临床研究-测量指标</span
      >
      <el-button type="success" :icon="EditPen" plain @click="handleMenu(1)">编 辑</el-button>
    </div>
  </div>
</template>
<script setup>
import { Promotion, EditPen, Avatar } from '@element-plus/icons-vue';
import { ref, reactive, computed, onMounted, defineEmits, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import caseloadOptions from '@/option/caseload/caseload';
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const emit = defineEmits();
const routerQuery = ref({});
routerQuery.value = route.query;
const router = useRouter();
const store = useStore();
</script>
<style scoped>
.open-message-content {
  width: 90%;
  height: 100%;
}
.top-btn-content {
  margin-bottom: 20px;
}
.open-message-form {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}
.footer-content {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
}
</style>